<template>
  <div class="tx-button-return-panel">
    <el-button type="primary" plain class="tx-button-return" @click="click()" v-if="$showAuthElement()">{{name}}</el-button>
    <el-dialog :title="'温馨提示'" :visible.sync="visible" :before-close="handleClose" width="500px" center append-to-body>
      <div class="tx-button-return-panel__content" v-loading="loading">
        <slot>
          您所编辑的内容将丢失！是否继续取消？
        </slot>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm()" :disabled="loading">继续取消</el-button>
        <el-button @click="handleClose()" :disabled="loading">暂不取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "返回列表"
    },
    target: {
      type: String,
      default: "列表"
    },
    close: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {

      loading: false,
      visible: false,
    };
  },
  methods: {
    click() {
      this.visible = true;
    },
    handleConfirm() {
      if (this.close) {
        this.$closeTagView()
      }
      this.$emit("click")
      this.visible = false;
    },
    handleClose() {
      this.visible = false;
    }
  },
};
</script>
<style lang="scss">
.tx-button-return-panel {
  display: inline;
  padding: 0px;
  .tx-button-return {
    width: 80px;
  }
  &__content {
    text-align: center;
  }

}  .tx-button-return-panel__content {
    color: #fff !important;
  }
</style>
 
